<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" id="mapview"/>



<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0 }
	#map_canvas { height: 100% }
  
  	#feedback { font-size: 1.2em; }
	#itemBuyList .ui-selecting { background: #FECA40; }
	#itemBuyList .ui-selected { background: #F39814; color: white; }
	#itemBuyList { list-style-type: none; margin: 0; padding: 0; width: 100%; }
	#itemBuyList li { margin: 0px; padding: 0.6em; font-size: 1.0em; }
	#itemBuyList li img{ vertical-align: middle; }
	
	#dataWindow { width: 150px; height: 150px; padding: 0.5em; background: #FECA40;}
</style>


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.sound.js"></script>
<!-- <script src="jquery.sound.js"></script>-->
<script src="googlemap.js"></script>
<script src="dataView.js"></script>
<script src="aircraft.js"></script>



<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>

</head>
<body onload="initialize()">

	<!-- LOGIN SCREEN -->

	<div id="loginScreen" title="Welcome to Flight Game!" hidden="true">
			User Name :<input value="" size="20" id="usernameField"><br>
			Password :<input type="password" value="" size="20" id="passwordField"><br>
			<input type="submit" value="Submit" id="submitButton"/>
			<label id="loginStatus">Login!</label>
	</div>
	<script type="text/javascript">
		var userName='';
	
		$("#submitButton").click(function () {
			$.sound.play('http://view.jquery.com/trunk/plugins/sound/demo/glass.wav');
			var username = $( "#usernameField" );
			var password = $( "#passwordField" );
			userName = username.val(); 		
			login(userName);
		});
	</script>
	
  	<div id="map_canvas" style="width:100%; height:100%">

  	</div>
	
	<div class="demo">
	
		<!-- USER PANEL -->
		<div id="userControlPanel" title="Welcome to Flight Game!" hidden="true">
			<b>Credits &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: </b><label id="userCredits"></label><br>
			<b>Ownership :</b> <input value="" size="15" id="ownershipField"><br><br>
			<button id="itemBuyButton">Buy Item</button>
			<div id="dialog-box">
			    <div class="dialog-content">
			        <div id="ownershipData"></div>
			 	</div>
			</div>
		</div>
		
		<div id="itemBuyPanel" title="Select an item to buy">
			<ol id="itemBuyList">
			</ol>
		</div>
		
		<div id="dataWindow" class="ui-widget-content" style="display:none; position: absolute;">
			<p></p>
		</div>
		
		<div id="incomingMessageWindow" class="ui-widget-content" style="display:none; position: absolute;">
			<p></p>
		</div>
  	
		
		<script type="text/javascript">

			var ownershipField = $( "#ownershipField" );
			var itemBuyButton = $( "#itemBuyButton" ).button();
			
			ownershipField.keypress(function(event) {
				if ( event.which == 13 ) { // enter
					useOwnershipInput(ownershipField.val());
				}
			});
			
			itemBuyButton.click(function(){
				$( "#itemBuyPanel" ).dialog({
					   resizable: false
				   });
				var itemList = $( "#itemBuyList" ).selectable({
					selected: function(event, ui) {
						var selectedItemId = $('.ui-selected', this).attr("id");

						buyItemOnMap(userName,selectedItemId);
					}
				});
				fillItemsBuy(itemList);
			});
			
			$( "#dataWindow").draggable();
		</script>
	</div>
	
	<!-- STYLES -->
	

</body>
</html>